import React, { useState } from 'react';
import TideRichTextEditor from '@/components/TideRichTextEditor';

const TideTest: React.FC = () => {
  const [content, setContent] = useState('<h1>测试 Tide Editor</h1><p>这是一个测试内容</p>');

  return (
    <div className="p-6">
      <h1 className="text-2xl font-bold mb-4">Tide Editor 测试页面</h1>
      
      <div className="mb-4">
        <h2 className="text-lg font-semibold mb-2">编辑器内容：</h2>
        <TideRichTextEditor
          value={content}
          onChange={setContent}
          placeholder="请输入内容..."
          className="w-full"
        />
      </div>
      
      <div className="mt-6">
        <h2 className="text-lg font-semibold mb-2">预览内容：</h2>
        <div 
          className="border border-gray-300 rounded-lg p-4 bg-gray-50"
          dangerouslySetInnerHTML={{ __html: content }}
        />
      </div>
      
      <div className="mt-4">
        <h2 className="text-lg font-semibold mb-2">原始 HTML：</h2>
        <pre className="bg-gray-100 p-4 rounded-lg overflow-x-auto text-sm">
          {content}
        </pre>
      </div>
    </div>
  );
};

export default TideTest;